<template>
	<div v-if="visible">
		<a-button type="primary" @click="showModal">Open Modal</a-button>
		<a-modal v-model:visible="visible" :title="title" @ok="handleOk" :confirm-loading="confirmLoading">
			<a-spin :spinning="spinning">
				<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
					<a-form-item label="选择需要修改字段" name="column">
						<a-select placeholder="请选择批量修改的字段" @change="handleChange">
							<a-select-option v-for="item in batchEditConfigs" :key="item.id" :value="item.columnName">
								{{ item.columnComment }}
							</a-select-option>
						</a-select>
					</a-form-item>

					<template v-if="selectColumn">
						<a-form-item :label="selectColumn.columnComment" name="value">
							<!-- 输入框 -->
							<a-input
								v-if="selectColumn.dataType === 'input'"
								v-model:value="formData.value"
								:placeholder="'请输入' + selectColumn.columnComment"
								allow-clear
							/>
							<!-- 文本域 -->
							<a-textarea
								v-else-if="selectColumn.dataType === 'textarea'"
								v-model:value="formData.value"
								:placeholder="'请输入' + selectColumn.columnComment"
								allow-clear
							/>
							<!-- 选择 -->
							<a-select
								v-else-if="selectColumn.dataType.includes('select')"
								v-model:value="formData.value"
								:placeholder="'请选择' + selectColumn.columnComment"
								:options="dataOptions"
							/>
							<!-- 单选 -->
							<a-radio-group
								v-else-if="selectColumn.dataType.includes('radio')"
								v-model:value="formData.value"
								:placeholder="'请选择' + selectColumn.columnComment"
								:options="dataOptions"
							/>
							<!-- 多选 -->
							<a-checkbox-group
								v-else-if="selectColumn.dataType.includes('checkbox')"
								v-model:value="formData.value"
								:placeholder="'请选择' + selectColumn.columnComment"
								:options="dataOptions"
							/>
							<!-- 日期选择 -->
							<a-date-picker
								v-else-if="selectColumn.dataType === 'datepicker'"
								v-model:value="formData.value"
								value-format="YYYY-MM-DD"
								style="width: 100%"
							/>
							<!-- 时间选择 -->
							<a-date-picker
								v-else-if="selectColumn.dataType === 'timepicker'"
								v-model:value="formData.value"
								show-time
								format="YYYY-MM-DD HH:mm:ss"
								style="width: 100%"
							/>
							<!-- 开关 -->
							<a-switch
								v-else-if="selectColumn.dataType === 'switch'"
								:checked="formData.value === 'ENABLE'"
								@change="editStatus(record)"
							/>
							<!-- 数字输入框 -->
							<a-input-number
								v-else-if="selectColumn.dataType === 'inputNumber'"
								v-model:value="formData.value"
								:min="1"
								style="width: 100%"
							/>
							<!-- 滑动输入条 -->
							<a-slider
								v-else-if="selectColumn.dataType === 'slider'"
								v-model:value="formData.value"
								:max="100"
								:min="1"
								style="width: 100%"
							/>
						</a-form-item>
					</template>
				</a-form>
			</a-spin>
		</a-modal>
	</div>
</template>

<script setup name="batchEdit">
	import { required } from '@/utils/formRules'
	import batchEditApi from '@/api/sys/batchEditApi'
	import tool from '@/utils/tool'

	const emit = defineEmits({ successful: null })
	const visible = ref(false) //显示控制
	const spinning = ref(true) //显示控制
	const confirmLoading = ref(false) //提交等待
	// 默认要校验的
	const formRules = {
		column: [required('请选择字段')],
		value: [required('请输入字段值')]
	}
	// 表单数据
	const formRef = ref()
	let formData = ref({})
	const props = defineProps({
		//唯一编码
		code: { type: String, default: '' },
		//标题
		title: { type: String, default: '批量更新' },
		//api地址
		api: { type: Object }
	})

	const batchEditConfigs = ref() //配置列列表
	const ids = ref() //id列表
	const dataOptions = ref() //字典列表
	// 打开这个界面
	const onOpen = (record) => {
		visible.value = true
		selectColumn.value = null
		ids.value = record
		formData.value = {}
		//获取字段
		batchEditApi.Columns({ code: props.code }).then((res) => {
			spinning.value = false
			batchEditConfigs.value = res
		})
	}

	const selectColumn = ref() //当前选择字段
	const handleChange = (column) => {
		selectColumn.value = batchEditConfigs.value.find((it) => it.columnName === column) //字段赋值
		formData.value.column = column //还原
		formData.value.value = null //还原
		//需要获取select选项
		if (selectColumn.value?.dictTypeCode) {
			dataOptions.value = tool.dictList(selectColumn.value.dictTypeCode)
		} else if (selectColumn.value?.requestUrl) {
			batchEditApi.RemoteUrl(selectColumn.value.requestUrl, selectColumn.value.requestType).then((res) => {
				//格式化数据
				dataOptions.value = res.map((item) => {
					return {
						value: item[selectColumn.value.requestValue],
						label: item[selectColumn.value.requestLabel]
					}
				})
			})
		}
	}
	// 修改开关
	const editStatus = (record) => {
		if (formData.value.value === 'ENABLE') {
			formData.value.value = 'DISENABLE'
		} else {
			formData.value.value = 'ENABLE'
		}
	}
	//提交
	const handleOk = () => {
		formRef.value.validate().then(() => {
			//时间选择器需要格式化
			if (selectColumn.value.dataType === 'timepicker') {
				formData.value.value = formData.value.value.format()
			}
			//插到数组后面可能会一次更新多个字段
			let columns = []
			columns.push({
				tableColumn: selectColumn.value.columnName,
				columnValue: formData.value.value
			})
			//组装数据
			let data = { ids: ids.value, columns, code: props.code }
			confirmLoading.value = true
			//请求接口
			props.api
				.edits(data)
				.then((res) => {
					emit('successful')
				})
				.finally(() => {
					confirmLoading.value = false
					visible.value = false
				})
		})
	}
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>

<style lang="scss" scoped></style>
